<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Realtime Log Show</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
    <style>
        body,.shell-input {font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;font-size: 14px;padding: 0px;background: #333;color: #fff;margin: 0;}
        .absolute{position: absolute;}
        .log-wrapper{top:0;bottom:0;padding-bottom:31px;overflow: auto;width: 100%;left:0;}
        .shell-input{
            border:solid 1px #999;bottom:30px;left:9%;right:10%;width:80%;font-size: 20px;
            height:40px;line-height:40px;color:#fff;padding:0 5px;background: rgba(120,120,120,0.9);
        }
        .log-item{padding: 5px;word-break: break-all;word-wrap:break-word;}
        .log-item:hover{background: rgba(120,120,120,0.3);}
        .control{
            z-index: 9;
            color: #000;
            top: 20px;
            right: 20px;
            background: rgba(255,255,255,0.95);
            padding: 5px 10px 10px;
        }
    </style>
</head>
<body>
    <div class="control absolute">
        <div class="setup-item scroll-mode">
	        <h2 class="h4">Auto Scroll</h2>
	        <div class="btn-group">
	            <button type="button" class="btn btn-default active">Enable</button>
	            <button type="button" class="btn btn-default">Disable</button>
            </div>
        </div>
    </div>
    <div class="log-wrapper absolute"></div>
    <input class="shell-input absolute">
    <script src="//cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        var socket = null;
        $(function(){
            var logId = 1,logWrapper = $('.log-wrapper'),shellInput = $('.shell-input');
            var enableScroll = true,process_appendLog = null;
            
            var appendLog = function(str){
                var message = str || 'he he da!';
                if(process_appendLog && typeof(process_appendLog) == "function"){
                    try{
                        var ret =process_appendLog.call(this,message);
                        if(ret === false) return;
                    }catch(e){}
                }
                console.log(str);
                
                if(typeof(str) == 'object') str = JSON.stringify(str);
                
                var log = $('<div class="log-item"></div>').appendTo(logWrapper);
                log.html(message);
                if(enableScroll){
                    var top = logWrapper.get(0).scrollHeight - logWrapper.height();
                    if(top > 0) logWrapper.scrollTop(top);
                }
            };
            $('.scroll-mode').on('click',function(e){
                var btn = $(e.relatedTarget || e.target);
                if(btn.hasClass('active')) return;
                $(this).find('.btn').toggleClass('active');
                enableScroll = $(this).find('.active').text().trim().toLowerCase() == 'enable';
                return false;
            });
            var shellProcess = function(str){
                if(str && str.length > 0){
                    var type = str.split(' ')[0].toLowerCase();
                    if(type == 'tail'){
                        socket.emit(type,{file:str.substr(5)});
                        return false;
                    }
                }
            };
            shellInput.on('keydown',function(e){
                if(e.keyCode == 13){
                    var value = shellInput.val();
                    shellInput.val('')
                     try{
                        var ret = shellProcess.call(this,value);
                        if(ret === false) return;
                    }catch(e){}
                    appendLog(value);
                }
            });
            
            socket = io.connect(location.host);
            socket.logined = false;
            socket.on('tail data',function(data){
                appendLog(data.replace(/\n/ig,'<br>\n'));
            });
            socket.on('login success',function(data){
                appendLog('login success');
                appendLog(data);
            });
            socket.on('login failed',function(data){
                appendLog('login failed!fail reason:' + data);
                appendLog('if you want login again,please send "i want to login" on the box!');
                process_appendLog =function(data){
                    if(data && data.toLowerCase() == 'i want to login'){
                        process_appendLog = null;
                        socket.emit('tail','dead fly');
                        return false;
                    }
                }
            });
            socket.on('sys info',function(data){
                console.log(data);
            });
            //process login
            socket.on('required login',function(data){
                appendLog(data);
                appendLog('please input login id:');
                process_appendLog = function(data){
                    var username = data;
                    process_appendLog = null;                    
                    appendLog('please input login password:');
                    process_appendLog = function(data){
                        var password = data;
                        process_appendLog = null;
                        socket.emit('login',{username:username,password:password});
                        return false;
                    };
                    return false;
                };
            });
        });
    </script>
</body>
</html>